<template>
  <div
    class="host tstLine"
    style="
      width: 1200px;
      margin: 0 auto;
      padding: 10px;
      height: 100%;
      box-sizing: border-box;
    "
  >
    <div
      class="tstLine"
      style="
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-sizing: border-box;
      "
    >
      <div class="info">
        <div style="font-size: 20px; padding: 10px">
          <p>
            <text>{{ $t("public.model") }}: CW6250C1500DF7</text>
            <text>{{ $t("public.serialNumber") }} : 25843722</text>
          </p>
          <p>
            <text>{{ $t("public.operatingHours") }}:6h</text>
            <text>{{ $t("public.time") }}:11</text>
          </p>
        </div>
        <div>
          <h3 style="text-align: left">主机工况参数(左主机)</h3>
        </div>
      </div>
      <div style="flex: 1; padding: 10px">
        <el-table
          :data="tableData[1]"
          border
          style="width: 100%"
          max-height="100%"
        >
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="value" label="参数值" />
          <el-table-column prop="point" sortable label="报警值">
            <template #default="scope">
              {{ scope.row.point + scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="amount2" sortable label="状态" />
        </el-table>
      </div>
      <div class="btn-group">
        <el-button round size="large" @click="index = 0">Main</el-button>
        <el-button round size="large" @click="index = 1" type="primary"
          >温度</el-button
        >
        <el-button round size="large" @click="index = 2" type="success"
          >压力</el-button
        >
        <el-button round size="large" @click="index = 3" type="info"
          >排温</el-button
        >
        <el-button round size="large" @click="index = 4" type="danger"
          >轴承</el-button
        >
        <el-button round size="large" type="warning" @click="index = 5"
          >LNG</el-button
        >
        <el-button round size="large" type="danger" @click="index = 6"
          >其他</el-button
        >
        <el-button round size="large" @click="index = 7">报警</el-button>
        <el-button round size="large" type="primary" @click="index = 8"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
let index = ref(0);
const tableData = [
  [
    {
      name: "左滑油进机温度",
      value: "10",
      unit: "℃",
      point: 75.0,
    },
    {
      name: "左冷却水出口温度",
      value: "10",
      unit: "℃",
      point: 85.0,
    },
    {
      name: "左中冷器冷却水温度",
      value: "10",
      unit: "℃",
      point: 95.0,
    },
    {
      name: "左增压空气温度",
      value: "10",
      unit: "℃",
      point: 70.0,
    },
    {
      name: "左增压器滑油温度",
      value: "10",
      unit: "℃",
      point: 85.0,
    },
    {
      name: "左机舱环境温度",
      value: "10",
      unit: "℃",
      point: 45.0,
    },
    {
      name: "左齿轮箱滑油温度",
      value: "10",
      unit: "℃",
      point: 75.0,
    },
    {
      name: "LNG燃气温度",
      value: "10",
      unit: "℃",
      point: 45.0,
    },
  ],
  [
    {
      name: "左滑油进机压力",
      value: "10",
      unit: "bar",
      point: 2.5,
    },
    {
      name: "左冷却水进机压力",
      value: "10",
      unit: "bar",
      point: 1.5,
    },
    {
      name: "左燃油进口压力",
      value: "10",
      unit: "bar",
      point: 2.0,
    },
    {
      name: "左海水出口压力",
      value: "10",
      unit: "bar",
      point: 1.2,
    },
    {
      name: "左增压空气压力",
      value: "10",
      unit: "bar",
      point: 1.2,
    },
    {
      name: "左增压器滑油压力",
      value: "10",
      unit: "bar",
      point: 1.3,
    },
    {
      name: "左齿轮箱滑油压力",
      value: "10",
      unit: "bar",
      point: 0.1,
    },
    {
      name: "左LNG燃气压力",
      value: "10",
      unit: "bar",
      point: 2.0,
    },
    {
      name: "左起动空气压力",
      value: "10",
      unit: "bar",
      point: 15.0,
    },
    {
      name: "左控制空气压力",
      value: "10",
      unit: "bar",
      point: 5.5,
    },
  ],
  [
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
  ],
  [
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
    {
      name: "左排气平均温度",
      value: "10",
      unit: "℃",
      point: 2.5,
    },
  ],
];
</script>

<style scoped lang="scss">
// .btn-group{
//     display: flex;
//     margin: 0 auto;
// }
.host {
  height: 100%;
  background: rgb(45, 73, 97);
}
:deep(.el-button--large.is-round) {
  padding: 12px 32px;
}
</style>
